import { Directive, ElementRef, Input } from '@angular/core';
//Controls
import { AmChartsService } from "@amcharts/amcharts3-angular";

@Directive({
    selector: '[linearChart]'
})
export class LinearChartDirective {
    private chart: any;
    private _chartData: any[] = [];

    @Input() chartID: string;
    @Input() showCategoryNames: boolean = true;
    @Input() showLegend: boolean = false;

    @Input() set chartData(value: any[]) {
        if (value) {
            this._chartData = value;

            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    this.chart.dataProvider = this._chartData;
                });
            }

        }
    }

    constructor(private el: ElementRef, private AmCharts: AmChartsService) { }

    ngOnInit() {
        this.chart = this.AmCharts.makeChart(this.chartID, {
            type: "serial",
            theme: "light",
            precision: 0,
            legend: {
                showEntries: this.showLegend,
                useGraphSettings: false,
                position: "top",
                labelText: "[[title]]",
                valueText: '',
                markerSize: 8,
                equalWidths: true,
                spacing: 5,
                forceWidth: true,
                switchable: true
            },
            autoMarginOffset: 20,
            autoMargins: false,
            marginTop: 30,
            marginLeft: 40,
            marginBottom: 40,
            marginRight: 40,
            dataProvider: this._chartData,
            graphs: [{
                colorField: "color",
                title: "ESG Rating",
                bullet: "none",
                bulletColor: "#B7C42E",
                bulletSize: 1,
                lineThickness: 2,
                lineColor: "#B7C42E",
                valueField: "scoreCompany"
            }, {
                colorField: "color",
                title: "Industry Leader",
                lineThickness: 2,
                lineColor: "#BBBBBB",
                valueField: "scoreIndustryLead"
            },
            {
                colorField: "color",
                title: "Industry Average",
                lineThickness: 2,
                lineColor: "#1D6094",
                valueField: "scoreGrouptAvg"
            }
            ],
            categoryField: "date",
            categoryAxis: {
                parseDates: true,
                dashLength: 1
            },
            chartCursor: {
                valueLineEnabled: true,
                valueLineBalloonEnabled: true,
                cursorAlpha:1,
                oneBalloonOnly: true,
                cursorColor:"#258cbb"
            },
            valueAxes: [{
                minimum: 0,
                maximum: 100, //so it displays the graph for max value (100)
                labelsEnabled: true,
                position: "right",
                titleFontSize: 10,
                marginLeft: 40,
                marginRight: 40
            }]
        });
    }

    ngOnDestroy() {
        this.AmCharts.destroyChart(this.chart);
    }
}